<template>
	<view class="container">

		<view class="listBar">

			<view class="BarArea">
				<view class="barItem" v-for="(item,index) in statusbar" :key="index" @click="changeTab(index)">
					<text :class="curBarIndex === index ? 'active' : ''">{{statusbar[index]}}</text>
				</view>
			</view>
		</view>


		<view class="orderList">

			<view class="orderCard" v-for="(order,index) in orderList" :key="index">
				<view class="orderTitle">
					<view class="orderReferce">
						<text>订单编号:</text>
						<text class="referceNum">
							{{order[0].id}}
						</text>
					</view>
					<view class="orderStatus">

						<text>{{ orderStatusTextMap[order[0].ordersPayStatus]}}</text>
					</view>
				</view>
				<view class="goodsList" v-for="(goodItem,index) in order[0].ordersDetailList">
					<view class="goodsItem">
						<!-- 商品图片 -->
						<view class="imgContent">
							<image :src="goodItem.ordersDetailProductDetailImg" mode="scaleToFill"></image>
						</view>
						<!-- 商品描述 -->
						<view class="descContent">
							<view class="mainDesc">
								<view class="mainGoodTitle">
									{{goodItem.productName}}
								</view>
								<view class="priceAndNum">
									<view class="price">
										￥{{goodItem.ordersDetailProductDetailPrice}}
									</view>
									<view class="quantity">
										x{{goodItem.ordersDetailNumber}}
									</view>
								</view>
							</view>
							<view class="additionDesc">
								{{goodItem.ordersDetailProductDetailSpecifications}}
							</view>
						</view>
					</view>
				</view>

				<view class="totalPrice">
					<text v-if="order[0].ordersPayStatus===0||order[0].ordersPayStatus===4">应付款</text>
					<text v-else>实付款</text>
					<text class="price">￥{{ Number(order[0].ordersThingAmount+order[0].ordersTransportAmount).toFixed(2) }}</text>
				</view>


				<!-- 卡片按钮操作组 -->
				<view class="operateButtons">
					<view class="buttonPosition">
						<button type="default" class="detail" v-if="order[0].ordersPayStatus==0"
							@click="openConfirmCard(order[0].id,'确定要取消该订单吗',1)">取消订单</button>
						<button type="default" class="detail" @click="toGetDetail(order)">查看订单</button>
						<button type="default" class="detail" v-if="order[0].ordersPayStatus==4"
							@click="openConfirmCard(order[0].id,'确认要删除该订单吗',2)">删除订单</button>
						<button type="default" class="confirm" v-if="order[0].ordersPayStatus==0"
							@click="toPay(order[0].id)">去付款</button>
						<button type="default" class="confirm" v-if="order[0].ordersPayStatus==2"
							@click="openConfirmCard(order[0].id,'您确认要签收该订单吗',3)">去收货</button>
					</view>
				</view>
			</view>


		</view>

		<view class="empty" v-if="orderList.length==0">
			<view class="icon">

			</view>
			<view class="textContent">
				<text>暂无相关的订单</text>
				<text>快去商城看看吧</text>
			</view>
		</view>


		<!-- 自己封装的弹出框 -->
		<confirmPop :isPopUp="confirmStatus" :title="operateTitle" @cancel="closeConfirmCard()"
			@confirm="handleConfirm()">
		</confirmPop>

		<view @click="closeConfirmCard()">
			<popMask :isShow="confirmStatus"></popMask>
		</view>

	</view>

</template>

<script>
	import * as OrderApi from '@/api/orders/orders.js'
	import * as payApi from '@/api/pay/pay.js'
	import confirmPop from '@/components/confirmPop.vue'
	import popMask from '@/components/popMask.vue'
	let lastRequestTime = 0;
	const requestInterval = 2000; // 设置请求的最小间隔时间，例如1000毫秒
	// rgba(179, 130, 75, 1)
	export default {
		components: {
			confirmPop,
			popMask
		},
		data() {
			return {
				statusbar: ['全部', '待付款', '待发货', '待收货'],
				curBarIndex: 0,
				orderList: [],

				orderStatusTextMap: {
					0: '待付款',
					1: '待发货',
					2: '待收货',
					3: '已完成',
					4: '已取消',
					5: '退款'
				},
				//取消订单的确认位
				confirmStatus: false,
				//准备取消的订单Id
				operateId: null,
				operateTitle: null,
				operateFlag:null

			};
		},
		onLoad(options) {
			// 先初始化订单列表，然后再看有没有其他页面携带的参数，有的话再进一步对List数组进行分类操作


			const paramsStr = options.params || null; // 获取URL查询参数中的params字段
			//接收个人中心传来的订单类型
			if (paramsStr != null) {
				const receivedParams = JSON.parse(paramsStr);
				// 将参数字符串解析为对象

				if (receivedParams.orderType) {
					this.changeTab(receivedParams.orderType)
				} else {
					this.changeTab(0)
				}

			}


		},
		onShow() {
			this.changeTab(this.curBarIndex)
		},
		methods: {
			//改变所展示的tab
			async changeTab(index) {
				
				//点击相同的直接返回避免多次请求
				// if (index === this.curBarIndex) {
				// 	return;
				// }
				this.curBarIndex = index;
				const res = await OrderApi.selectAllInfo();
				if (res.data.code === 200) {
					this.orderList = res.data.data;
				}
				//每次都要重新获取，然后进行list的重新赋值

				//在这里移除不是相应类型的订单
				if (index != 0) {
					this.orderList = this.orderList.map(orderGroup => {
						return orderGroup.filter(orderItem => {
							return orderItem.ordersPayStatus === index - 1; // 或者是基于index的某种条件
						});
					});

					// 移除空数组
					this.orderList = this.orderList.filter(orderGroup => orderGroup.length > 0);
				}

				console.log("修改后的orderList")
				console.log(this.orderList);




			},

			openConfirmCard(id, title,flag) {
				this.operateId = id;
				this.operateTitle = title;
				this.operateFlag=flag;
				this.confirmStatus = true;
			},

			closeConfirmCard() {
				this.confirmStatus = false;
			},
			handleConfirm() {
				let flag=this.operateFlag;
               if(flag===1){
				   this.toCancel();
			   }else if(flag===2){
				   this.toDelete();
			   }else if(flag===3){
				   this.toReceiveGoods();
			   }
			},
			//取消订单
			async toCancel() {
				this.confirmStatus = false;
				const res = await OrderApi.cancelOrder(this.operateId);
				console.log("取消订单")
				console.log(res)
				if (res.data.code == 200) {
					this.changeTab(this.curBarIndex)
					this.operateId = null;
					return uni.$showMsg('取消订单成功')
				}
			},

			async toReceiveGoods() {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}
				lastRequestTime = currentTime; // 更新上一次请求时间
				this.confirmStatus = false;
				const res = await OrderApi.toReceive(this.operateId);
				console.log("订单收货")
				console.log(res)
				if (res.data.code == 200) {
					this.changeTab(this.curBarIndex)
					this.operateId = null;
					return uni.$showMsg('已收货')
				}
			},

			//删除已取消的订单
			async toDelete() {
				this.confirmStatus = false;
				const res = await OrderApi.deleteOrdersList(this.operateId);
				console.log("删除订单")
				console.log(res)
				if (res.data.code == 200) {
					this.changeTab(this.curBarIndex)
					this.operateId = null;
					return uni.$showMsg('删除订单成功')
				}
			},

			toGetDetail(order) {
				console.log("传递的订单")
				console.log(order)
				uni.$toPage('/subpkg/shoppingMall/order_detail/order_detail', {
					order: order
				})

			},

			async toPay(id) {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}
				lastRequestTime = currentTime; // 更新上一次请求时间
				
				const res = await payApi.payOrderMoney(id);
				console.log("去支付的数据")
				console.log(res);
				if (res.data.code === 200) {
					let orderResponseData = res.data.data.stringStringMap;
					uni.$WxPay(orderResponseData);
				}

			},





		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		background: rgba(243, 243, 245, 1);
		overflow-y: scroll;

		//没有订单的空区域显示
		.empty {
			position: absolute;
			bottom: 754rpx;
			left: 236rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.icon {
				box-sizing: border-box;
				width: 112.31rpx;
				height: 141.87rpx;
				opacity: 1;
				border-radius: 8.84rpx;
				background: url('/static/cate/shopm_img_order_disabled@2x.png');
				background-size: cover;
				margin-bottom: 72rpx;
			}

			.textContent {
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 116rpx;
				opacity: 1;
				font-size: 40rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 57.92rpx;
				color: rgba(102, 102, 102, 1);
			}
		}

		.listBar {
			position: fixed;
			height: 124rpx;
			box-sizing: border-box;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 32rpx;
			background: rgba(243, 243, 245, 1);
			z-index: 999;

			.BarArea {
				font-size: 32rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 124rpx;
				box-sizing: border-box;
				width: calc(100% - 184rpx);

				.barItem {
					.active {
						font-weight: 700;
						font-size: 36rpx;
						color: rgba(179, 130, 75, 1);
					}
				}
			}


		}

		// 订单列表
		.orderList {
			width: 100%;
			margin-top: 124rpx;

			// 订单卡片
			.orderCard {
				border-radius: 10rpx;
				background: rgba(255, 255, 255, 1);
				margin: 0 20rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				padding-bottom: 30rpx;
				margin-bottom: 20rpx;



				.orderTitle {
					padding-top: 20rpx;
					border-bottom: 0.6rpx solid rgba(229, 229, 229, 1);
					padding-bottom: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.orderReferce {
						font-size: 28rpx;

						.referceNum {
							margin-left: 5rpx;
						}


					}

					.orderStatus {
						font-weight: 700;
						font-size: 28rpx;
						color: rgba(179, 130, 75, 1);
					}
				}

				.goodsList {
					.goodsItem {
						box-sizing: border-box;
						padding: 15rpx;
						padding-left: 0;
						padding-bottom: 5rpx;
						width: 100%;
						display: flex;
						align-items: center;
						display: flex;


						.imgContent {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 158rpx;
							height: 152rpx;
							border-radius: 8rpx;

							image {
								width: 158rpx;
								height: 152rpx;
								border-radius: 8rpx;
							}

						}

						.descContent {

							margin-left: 20rpx;

							.mainDesc {


								width: 500rpx;
								display: flex;
								justify-content: space-between;

								.mainGoodTitle {
									font-size: 32rpx;
									width: 320rpx;
								}

								.priceAndNum {

									margin-right: 12rpx;
									display: flex;
									flex-direction: column;
									text-align: right;

									.price {

										text-align: right;
										font-size: 32rpx;
										color: rgba(0, 0, 0, 1);
									}

									.quantity {

										color: rgba(128, 128, 128, 1);
										font-size: 24rpx;
										text-align: right;
									}

								}


							}

							.additionDesc {
								margin-top: 15rpx;
								color: rgba(128, 128, 128, 1);
								font-size: 24rpx;
							}
						}

					}

				}

				.totalPrice {

					text-align: right;
					font-size: 32rpx;
					font-weight: 600;
					margin-right: 6rpx;

					.price {

						margin-left: 15rpx;
					}
				}

				.operateButtons {
					padding-right: 0;
					margin-top: 28rpx;
					position: relative;
					height: 54rpx;

					.buttonPosition {

						position: absolute;
						right: 0rpx;
						display: flex;
					}


					button {

						margin-left: 30rpx;
						box-sizing: border-box;
						font-size: 24rpx;
						font-weight: 400;
						height: 54rpx;
						opacity: 1;
						border-radius: 26rpx;
						display: flex;
						width: 160rpx;
						align-items: center;
						justify-content: center;
						line-height: 36rpx;
					}

					.confirm {

						color: rgba(255, 255, 255, 1);
						background: rgba(196, 143, 82, 1);
						border: 1rpx rgba(196, 143, 82, 1);
					}

					.detail {
						color: rgba(0, 0, 0, 1);
						border: 1rpx solid rgba(85, 85, 87, 1);

					}
				}

				//anniu
			}



		}



	}


	.container::-webkit-scrollbar {
		display: none;
	}
</style>